<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/fabufangyuan.css">
    <script type="text/javascript" src="../js/fabufangyuan.js"></script>
    <title>Document</title>
</head>

<body>

    <div class="tishi" id='tishi'>
        <div style="text-align: center;transform: scale(0.5,0.5);margin-left: -29px;margin-top: -10px;width: 200%;height: 200%;line-height:40px;"></div>
    </div>

    <div class='onck' id="onck">
        <div id='oncka'>
            <div>
                <h2>选择城市</h2>
                <span class="fis">热门城市:</span>
                <span>北京</span>
                <span>上海</span>
                <span>深圳</span>
                <span>杭州</span>
            </div>
            <div>
                <ul>
                    <li><span>B</span>
                        <a href="#">北京</a>
                    </li>
                    <li><span>C</span>
                        <a href="#">成都</a>
                        <a href="#">重庆</a>
                    </li>
                    <li><span>D</span>
                        <a href="#">大连</a>

                    </li>
                    <li><span>G</span>
                        <a href="#">广州</a>

                    </li>
                    <li><span>H</span>
                        <a href="#">杭州</a>
                    </li>
                    <li><span>N</span>
                        <a href="#">南京</a>
                    </li>
                    <li><span>S</span>
                        <a href="#">上海</a>
                        <a href="#">深圳</a>
                        <a href="#">苏州</a>
                    </li>
                    <li><span>T</span>
                        <a href="#">天津</a>
                    </li>
                    <li><span>W</span>
                        <a href="#">武汉</a>
                    </li>
                    <li><span>X</span>
                        <a href="#">西安</a>
                    </li>
                    <li><span>Z</span>
                        <a href="#">郑州</a>
                    </li>
                </ul>
            </div>
            <div onclick="b()"><img src="../img/close.png" alt=""></div>
        </div>
    </div>
    <div class='onck1' id="onck1">
        <div>
            <div>
                <h2>选择城市</h2>
            </div>
            <div>
                <ul id="city">
                    <li>上海</li>
                    <li>北京</li>
                    <li>深圳</li>
                    <li>杭州</li>
                    <li>南京</li>
                    <li>成都</li>
                    <li>大连</li>
                    <li>广州</li>
                    <li>苏州</li>
                    <li>天津</li>
                    <li>重庆</li>
                    <li>武汉</li>
                    <li>西安</li>
                    <li>郑州</li>
                    <li>宁波</li>
                    <li>嘉兴</li>
                </ul>
            </div>
            <div onclick="b1()"><img src="../img/close.png" alt=""></div>
        </div>
    </div>
    <div style="position: fixed;right: 20px;bottom: 100px;width: 55px;height: 205px;z-index: 999;">
        <ul style="cursor: pointer;" id="san" class="san">
            <li>
                <img src="../img/suggestion_1.png" alt="" style="width: 29px;vertical-align: middle;">
                <div class="caa">
                    <div>意见反馈</div>
                    <div></div>
                </div>

            </li>
            <li><img src="../img/im_normal_new_1122_1.png" alt="" style="width: 29px;vertical-align: middle;">
                <div style="position:absolute;top: 22px;right: 80px;width: 75px;height: 30px;">
                    <div>在线客服</div>
                    <div></div>
                </div>
            </li>
            <li><img src="../img/toTop_1122_1.png" alt="" style="width: 29px;vertical-align: middle;">
                <div style="position:absolute;top: 22px;right: 80px;width: 75px;height: 30px;">
                    <div>回到顶部</div>
                    <div></div>
                </div>
            </li>
        </ul>
    </div>
    <!-- 网页头 -->
    <header>
        <!-- 大的div宽为100%，高为40px -->
        <div>
            <!-- 包裹的div宽为1190px，高为父级的100% -->
            <div>
                <!-- 左边的div -->
                <div class="h_left">
                    <ul>
                        <li onclick="a()"><span><img src="../img/location.png" alt=""></span><span>北京</span></li>
                        <li><a href="#" onclick="cli()" id="index">首页</a></li>
                        <li onclick="search()" id="search"><a href="../html/lijizhaofang.html">立即找房</a></li>
                        <li><a href="../html/fabufangyuan.html">发布房源</a>
                            <div></div>
                        </li>
                        <li><a href="../html/zhaoshiyou.html">找室友</a></li>
                        <li><a href="../html/download.html">下载APP</a></li>
                        <li><a href="#">伙伴登录</a></li>
                    </ul>

                </div>
                <!-- 右边的div -->
                <div class="h_right">
                    <ul>
                        <span><img src="../img/icon_people_white.png" alt=""></span>
                        <a href="#">注册</a>
                        <a href="#">登录</a>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <!-- 网页主体内容 -->
    <main>
        <div style="position: relative;min-width: 1190px;background-color: #f9f8f6;"><img src="../img/createhouse_img.png" alt="" style="width: 100%;min-width: 1190px;">
            <div style="position: absolute; width: 215px; height: 80px;background-color:#EE3843; top: 75%;right: 30%;border-radius: 40px;text-align: center;font-size: 22px; line-height: 80px;cursor: pointer;">
                <a href="#fabu" style='color: white;text-decoration: none;'>马上发布</a></div>
        </div>
        <div style="background-color: #f9f8f6;">
            <div style="width: 1190px;margin: 0 auto;margin-top: 0;" id='fabu'>
                <h1 style="margin: 0;font-weight:bold;font-size: 30px;color: #3a3b3c;text-align: center;">填写您的基本信息,<span style="color:red;margin-left: 10px;">巴乐兔</span>工作人员会尽快与您联系确认</h1>
                <div class="main-a" id='xinxi'>
                    <div>1.提交基本信息</div>
                    <div>2.提交详细信息</div>
                    <div>3.提交成功</div>
                </div>
                <div class="biao">
                    <ul id='biao1'>
                        <li><span>姓名</span><input type="text"></li>
                        <li><span>电话</span><input type="text"></li>
                        <li><span>城市名称</span><input type="text" onfocus="a1()" id='a1' autocomplete="off"></li>
                        <li><span>小区名称</span><input type="text"></li>
                        <li><span>具体门牌号</span><input type="text"></li>
                        <li style="display: flex;justify-content: center;">
                            <div style="border:1px solid red;cursor: pointer;" onclick="zheng()" id='zheng'>整租房源</div>
                            <div style="cursor: pointer;" onclick="he()" id='he'>合租房源</div>
                        </li>
                        <li onclick="next()" style="cursor: pointer;">下一步</li>
                    </ul>
                    <ul id='biao2' style="display: none;">
                        <li><span>租房类型</span><input id='leixing' type="text" style="border: 0;background-color: #f9f8f6;font-size: 16px;" disabled></li>
                        <li><span>租金报价</span><input type="text"></li>
                        <li><span>整套面积</span><input type="text" onfocus="a13()" id='a13'></li>
                        <li><span>户型</span><input type="text"></li>
                        <li><span>楼层</span><input type="text"></li>
                        <li><span>房间类型</span><input type="text"></li>
                        <li><span>房间朝向</span><input type="text"></li>
                        <li><span>出租面积</span><input type="text"></li>
                        <li><span>房间名称</span><input type="text"></li>
                        <li><span>楼房类型</span><input type="text"></li>
                        <li><span>起租日期</span><input type="text"></li>
                        <li><span>房源照片</span><input type="text"></li>
                        <!-- <li style="display: flex;justify-content: center;">
                            <div style="border:1px solid red;cursor: pointer;" onclick="zheng()" id='zhen3g'>整租房源</div>
                            <div style="cursor: pointer;" onclick="he()" id='he3'>合租房源</div>
                        </li> -->
                        <li onclick="next1()" style="cursor: pointer;">上一步</li>
                    </ul>
                    <ul id='biao3' style="display: none;" class="biao3">
                        <li style="margin-right: 110px;"><span>租房类型</span><input id='leixing3' type="text" style="border: 0;background-color: #f9f8f6;font-size: 16px;" disabled></li>
                        <li><span>租金报价</span><input type="text"><span>元/月</span></li>
                        <li><span>整套面积</span><input type="text"><span>平</span></li>
                        <li><span>户型</span><input type="text"><span>元/月</span></li>
                        <li><span>整套面积</span><input type="text"><span>平</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="m-foo" style="background-color: #f2f2f2;padding: 50px 0;">
            <div>
                <div style="width: 750px; height: 115px;">
                    <div style="display: inline-block;margin: auto 0;"><img src="../img/creat_house_c.png" style="padding-bottom: 15px;"></div>
                    <div style="display: inline-block;margin-left: 50px;">
                        <span style="color: red; font-weight: 700; margin-top: 9px; display: inline-block;">10106006</span>
                        <p>直接拨打热线客服也可以哦</p>
                        <p>工作时间:周一~周日 8:00~23:00</p>
                    </div>
                </div>
                <div>
                    <div style="height: 115px;">
                        <div style="display: inline-block;margin: auto 0;"><img src="../img/code.png"></div>
                        <div style="display: inline-block;margin-left: 50px;">
                            <span style="color: red; font-weight: 700;display: inline-block;">关注巴乐兔公众号</span>
                            <p>点击公众号下的“发布”就可以</p>
                            <p>发布房源啦～</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- 网页尾 -->
    <footer>
        <div class="f_up">
            <div>
                <div>
                    <img src="../img/tuzi@2x.png" alt="">
                </div>
                <div>
                    <img src="../img/dibu.png" alt="" style="height: 150px;">
                </div>
            </div>
        </div>
        <div class="f_down">
            <div>
                <div>
                    <div>
                        <p>热门城市租房</p>
                        <ul>
                            <li><a href="#">上海租房</a></li>
                            <li>
                                <a href="#">杭州租房</a></li>
                            <li>
                                <a href="#">深圳租房</a></li>
                            <li>
                                <a href="#">西安租房</a></li>
                            <li>
                                <a href="#">成都租房</a></li>
                            <li>
                                <a href="#">大连租房</a></li>
                            <li>
                                <a href="#">广州租房</a></li>
                            <li>
                                <a href="#">苏州租房</a></li>
                            <li>
                                <a href="#">天津租房</a></li>
                            <li>
                                <a href="#">重庆租房</a></li>
                            <li>
                                <a href="#">武汉租房</a></li>
                            <li>
                                <a href="#">郑州租房</a></li>
                            <li>
                                <a href="#">宁波租房</a></li>
                            <li>
                                <a href="#">嘉兴租房</a></li>
                            <li>
                                <a href="#">南昌租房</a></li>
                            <li>
                                <a href="#">北京租房</a></li>
                            <li>
                                <a href="#">清远租房</a></li>
                        </ul>
                    </div>
                    <div>
                        <p>推荐区域租房</p>
                        <ul>
                            <li>
                                <a href="#">朝阳</a>
                            </li>
                            <li><a href="#">海淀</a></li>
                            <li><a href="#">东城</a></li>
                            <li><a href="#">西城</a></li>
                            <li><a href="#">丰台</a></li>
                            <li><a href="#">通州</a></li>
                            <li><a href="#">石景山</a></li>
                            <li><a href="#">房山</a></li>
                            <li><a href="#">昌平</a></li>
                            <li><a href="#">大兴</a></li>
                            <li><a href="#">顺义</a></li>
                            <li><a href="#">密云</a></li>
                            <li><a href="#">柔化</a></li>
                            <li><a href="#">延庆</a></li>
                            <li><a href="#">平谷</a></li>
                            <li><a href="#">门头沟</a></li>
                        </ul>

                    </div>
                    <div>
                        <p>推荐类型租房</p>
                        <ul>
                            <li><a href="#">1号线</a></li>
                            <li><a href="#">2号线</a></li>
                            <li><a href="#">4号大兴线</a></li>
                            <li><a href="#">5号线</a></li>
                            <li><a href="#">6号线</a></li>
                            <li><a href="#">8号线</a></li>
                            <li><a href="#">10号线</a></li>
                            <li><a href="#">13号线</a></li>
                            <li><a href="#">14号线西段</a></li>
                            <li><a href="#">15号线</a></li>
                            <li><a href="#">八通线</a></li>
                            <li><a href="#">机场线</a></li>
                            <li><a href="#">昌平线</a></li>
                            <li><a href="#">亦庄线</a></li>
                            <li><a href="#">房山线</a></li>
                            <li><a href="#">14号线东段</a></li>
                            <li><a href="#">7号线</a></li>
                            <li><a href="#">9号线</a></li>
                            <li><a href="#">16号线</a></li>
                            <li><a href="#">西郊线</a></li>
                            <li><a href="#">燕房线</a></li>
                            <li><a href="#">S1号线</a></li>
                        </ul>
                    </div>
                    <div>
                        <p>推荐类型租房</p>
                        <ul>
                            <li><a href="#"><span></span>合租</a></li>
                            <li><a href="#"><span></span>整租</a></li>
                            <li><a href="#"><span></span>公寓</a></li>
                        </ul>
                    </div>
                </div>
                <div>
                    <div>
                        <div>
                            <ul>
                                <li><a href="#">关于巴乐兔</a>
                                    <p>伙伴登录</p>
                                    <p>网站地图</p>
                                    <p>巴乐兔社区</p>
                                </li>
                                <li>巴乐兔合作公寓
                                    <p>青年汇</p>
                                    <p>银桥公寓</p>
                                    <p>爱家精品公寓...</p>
                                </li>
                                <li>意见反馈
                                    <p>Mail:service@baletu.com</p>
                                    <p>联系巴乐兔</p>
                                    <p>10106006</p>
                                    <p>周一~周日8:00~23:00</p>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <div>
                                <p>扫码下载巴乐兔APP</p>
                                <img src="../img/baletuLogo1.png" alt="">
                            </div>
                            <div>
                                <p>扫码下载巴乐兔APP</p>
                                <img src="../img/code.png" alt=""></div>
                        </div>

                    </div>
                    <div>
                        <p><span>©2015 上海万间信息技术有限公司</span><span><span>营业执照 </span><span>隐私政策 </span><span> 上海市张江高科晨晖路88号1号楼4层</span></span>
                        </p>
                        <p><span><img src="../img/gongan.png" alt="">沪公网安备31011502006937号</span><span>增值电信业务许可证: 沪B2-20170251</span></p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>
<script>
    (function() {

        var xx = document.getElementById('san').children;
        for (var ff of xx) {
            ff.onmouseover = function() {
                if (this.children[1].children[0].innerHTML == '在线客服') {
                    height = 88;
                } else if (this.children[1].children[0].innerHTML == '回到顶部') {
                    height = 154;
                } else height = 22;
                this.getElementsByTagName('div')[0].style.cssText = `visibility: visible;position: absolute;top: ${height}px;right: 80px;width: 75px;height: 30px;`
            }
            ff.onmouseout = function() {
                this.getElementsByTagName('div')[0].style.cssText = 'visibility:hidden'
            }
        }
        // a.onmouseover = function() {
        //     document.getElementsByClassName('caa')[0].style.cssText = 'visibility: visible;position: absolute;top: 22px;right: 80px;width: 75px;height: 30px;'
        // }
        // a.onmouseout = function() {
        //     document.getElementsByClassName('caa')[0].style.cssText = 'visibility:hidden'
        // }
    }());
</script>

</html>